<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span="2">
                    <el-button type="primary"  @click="add">增加</el-button>
                </el-col>
                <el-col :span="20">
                    <div class="yaoping_seacher">
                        <div>
                    药品名:<el-input v-model="search.name" placeholder="请输入药品名" class="doctor_seacher_info"></el-input>
                    编号:<el-input v-model="search.no" placeholder="请输入编号" style="width:150px;margin-right:10px"></el-input>
                    库存范围: <el-input v-model="search.start_kucun" placeholder="起" class="doctor_seacher_info"></el-input>-
                              <el-input v-model="search.end_kucun" placeholder="止" class="doctor_seacher_info"></el-input>
                    类型:<el-select v-model="search.yaopingType" placeholder="请选择药品类型" @visible-change="getAllypTpye">
                            <el-option v-for="ypType in ypTypes" :key="ypType.id" :label="ypType.name" :value="ypType.id"></el-option>
                        </el-select>
                        </div>
                    <div>
                    到期时间:<el-date-picker v-model="search.start_time" type="date" placeholder="选择起始日期" value-format="yyyy-MM-dd"></el-date-picker>-
                              <el-date-picker v-model="search.end_time" type="date" placeholder="选择最终日期" value-format="yyyy-MM-dd"></el-date-picker>
                      产地:<el-cascader v-model="search.value" :options="options" :props="{label:'name',value:'name',children:'addresses',checkStrictly: true }" clearable></el-cascader>
                    
                    </div>     
                    </div>
                </el-col>
                <el-col :span="2">
                     <el-button type="primary" @click="searche" icon="el-icon-search" style="margin-left:20px">搜索</el-button>
                </el-col>
            </el-row>
        </el-card>

        <el-card>
            <table class="table table-striped projects">
                <thead>
                    <tr>
                        <th style="width: 10%">
                            序号
                        </th>
                        <th style="width: 10%">
                            药品名字
                        </th>
                        <th style="width: 10%">
                            编号
                        </th>
                        <th style="width: 10%">
                            价格
                        </th>
                         <th style="width: 10%">
                            库存
                        </th>
                        <th style="width: 10%">
                            到期时间
                        </th>
                        <th style="width: 10%">
                            产地
                        </th>
                        <th style="width: 10%">
                            类型
                        </th>
                        <th style="width: 25%" class="text-center">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(yaoping,index) in yaopingPage" :key="yaoping.id">
                        <td> {{index+1}} </td>
                        <td>{{yaoping.name}}</td>
                        <td>{{yaoping.no}}</td>
                        <td>{{yaoping.price}}</td>
                        <td>{{yaoping.stock}}</td>
                        <td>{{yaoping.timeOfValidity}}</td>
                        <td>{{yaoping.placeOfOrigin}}</td>
                        <td>{{yaoping.categoryName}}</td>
                        
                        <td class="project-actions text-center">
                            <!-- <a class="btn btn-primary btn-sm" href="javascript:void(0)" @click="viewDoctor(doctor.id)">
                                <i class="fas fa-folder">
                                </i>
                                查看详情
                            </a> -->
                            <a class="btn btn-info btn-sm" href="javascript:void(0)" @click="yaopingEdit(index,yaoping.id)">
                                <i class="fas fa-pencil-alt">
                                </i>
                                修改
                            </a>
                            <a class="btn btn-danger btn-sm" href="#">
                                <i class="fas fa-trash">
                                </i>
                                删除
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-card>
        <el-card style="text-align:center">
            <el-pagination background layout="sizes,prev, pager, next" :page-sizes="[1, 2, 3, 4]" @size-change="sizeChange"
            @current-change="currentChange" :total="totalPage" :page-size="pageSize" :current-page.sync="cpage" ></el-pagination>
        </el-card>
        <el-dialog  :title="title"  :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="药品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.yaopingName" autocomplete="off" placeholder="请填写药品名称"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.yaopingPrice" autocomplete="off" placeholder="请填写价格"></el-input>
                </el-form-item>
                 <el-form-item label="库存" :label-width="formLabelWidth" placeholder="库存">
                    <el-input v-model="form.kucun" autocomplete="off" placeholder="请填写库存"></el-input>
                </el-form-item>
                <el-form-item label="到期时间" :label-width="formLabelWidth">
                    <div class="block">
                        <el-date-picker v-model="form.daoqiData" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>

                 <el-form-item label="药品产地" :label-width="formLabelWidth">
                        <el-cascader v-model="value" :options="options"  :props="{ label:'name',value:'name',children:'addresses',expandTrigger: 'hover' }">
                        </el-cascader>
                </el-form-item>

                 <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.dizixiangxi" autocomplete="off" placeholder="请填写详细地址"></el-input>
                </el-form-item>

                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-select v-model="form.yaopingType" placeholder="请选择药品类型" @visible-change="getAllypTpye">
                        <el-option v-for="ypType in ypTypes" :key="ypType.id" :label="ypType.name" :value="ypType.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
    const axios = require("axios");
    export default {
        data(){
            return{
                search:{
                    name:'',
                    no:'',
                    start_kucun:'',
                    end_kucun:'',
                    start_time:'',
                    end_time:'',
                    value:[],
                    yaopingType:''
                },
                index: 0,
                yaopingid: 0,
                title:'药品添加',
                yaopinginfo:[],
                dialogFormVisible: false,
                form: {
                    dizixiangxi: '',
                    yaopingName: '',
                    yaopingPrice: '',
                    daoqiData: '',
                    yaopingType: '',
                    kucun: ''
                    },
                formLabelWidth: '120px',
                value: [],
                options: [],
                ypTypes: [],
                pageSize: 2,
                totalPage: 0,
                yaopingPage: [],
                thisPage:'1',
                cpage:''
            }  
        },
        methods:{
            searche(){
                let addresse =  this.search.value;
                let address = '';
                for (let i = 0; i < addresse.length; i++) {
                    address= address + addresse[i]+"/";
                }
                axios.post("http://192.168.6.189:8080/drugs/getByCondition",{
                    name:this.search.name,
                    no:this.search.no,
                    kuCunStart:this.search.start_kucun,
                    kunCunEnd:this.search.end_kucun,
                    timeStart:this.search.start_time,
                    timeEnd:this.search.end_time,
                    address:address,
                    categoryId:this.search.yaopingType
                }).then((r) => {
                    if(r.data.code == 200){
                        this.yaopinginfo = r.data.data;
                        this.goPage(1,this.pageSize);
                        this.totalPage=this.yaopinginfo.length;
                        this.cpage = 1;
                    }
                })
            },
            getAllypTpye(e){
                if(e){
                     //查询所有药品类型
                    axios.get("http://192.168.6.189:8080/hpl-drug-category/getAll").then((r) => {
                        if(r.data.code == 200){
                            console.log(r.data.data);
                            this.ypTypes = r.data.data;
                        }
                     })
                }
            },
            add(){
                this.dialogFormVisible=true;
                this.title="药品添加"
            },
            onSubmit(){
                //提交药品信息
                if(this.title=="药品添加"){
                    let addresse = this.value;
                    let address = addresse[0]+"/"+ addresse[1]+"/"+addresse[2]+"/"+this.form.dizixiangxi;
                    axios.post("http://192.168.6.189:8080/drugs/htAdd",{
                        name:this.form.yaopingName,
                        stock:this.form.kucun,
                        price:this.form.yaopingPrice,
                        timeOfValidity:this.form.daoqiData,
                        categoryId:this.form.yaopingType,
                        placeOfOrigin: address
                    }).then((r) => {
                        if(r.data.code == 200){
                            this.totalPage=this.totalPage+1;
                            this.yaopinginfo.push(r.data.data);
                            this.dialogFormVisible=false;
                        }
                    })
                }else{
                    let addresse = this.value;
                    let address = addresse[0]+"/"+ addresse[1]+"/"+addresse[2]+"/"+this.form.dizixiangxi;
                    axios.post("http://192.168.6.189:8080/drugs/htupdate",{
                        id:this.yaopingid,
                        name:this.form.yaopingName,
                        stock:this.form.kucun,
                        price:this.form.yaopingPrice,
                        timeOfValidity:this.form.daoqiData,
                        categoryId:this.form.yaopingType,
                        placeOfOrigin: address
                    }).then((r) => {
                        if(r.data.code == 200){
                            this.yaopinginfo.splice(this.index,1,r.data.data)
                            this.goPage(this.thisPage,this.pageSize);
                            this.dialogFormVisible=false;
                        }
                    })
                }
                
            },
            yaopingEdit(index,id){
                this.form.yaopingName = this.yaopinginfo[index].name;
                this.form.yaopingPrice = this.yaopinginfo[index].price;
                this.form.kucun = this.yaopinginfo[index].stock;
                this.form.daoqiData = this.yaopinginfo[index].timeOfValidity;
                let a = this.yaopinginfo[index].placeOfOrigin.split("/");
                this.form.dizixiangxi = a[3];
                this.dialogFormVisible=true;
                this.title="修改药品信息";
                this.yaopingid = id;
                this.index = index;
                this.yaopingType = this.yaopinginfo[index].categoryId;
            },
            sizeChange(r){
                this.yaopingPage.splice(0,this.yaopingPage.length);
                this.pageSize=r;
                this.goPage(1,r);
                this.cpage = 1;
            },
            currentChange(r){
                this.goPage(r,this.pageSize);
                this.thisPage = r;
            },
            goPage(nowPage,pageSize){
                this.yaopingPage.splice(0,this.yaopingPage.length);
                let start = (parseInt(nowPage)-1)*parseInt(pageSize);
                for (let i = 0; i < parseInt(pageSize); i++) {
                    if(i+start<this.yaopinginfo.length){
                    this.yaopingPage[i]=this.yaopinginfo[start+i];
                    }
                }
            },
        },
        mounted(){
            //查询药品
            axios.get("http://192.168.6.189:8080/drugs/htGetAll").then((r) => {
                if(r.data.code == 200){
                     this.yaopinginfo = r.data.data;
                     this.goPage(1,this.pageSize);
                     this.totalPage=this.yaopinginfo.length;
                }
            }),
            //查询所有地址
            axios.get("http://192.168.6.189:8080/hpl-address/getAll").then((r) => {
                if(r.data.code == 200){
                    this.options = r.data.data;
                }
            })
        }
    }
</script>

<style scoped>
    .yaoping_seacher{
        float: left;
    }
    .doctor_seacher_info{
        width: 120px;
        margin-right: 10px;
    }
</style>